<template>
  <div id="projectLayout">
    <div class="project-box clearfix pr fl">
      <div class="project-status">
        {{project.statusTxt}}
      </div>
      <div class="project-img clearfix pr">
        <div class="project-name">
          {{project.name}}
        </div>
        <div class="project-date">
          {{project.effectiveTime}} - {{project.expriedTime}}
        </div>
        <img src="../../assets/project-item-img.jpg" alt="投资项目">
      </div>
      <div class="project-intro">
        <p>{{project.description}}</p>
      </div>
      <div class="project-info clearfix">
        <div>
          <Progress :percent="project.percent" :stroke-width="5"></Progress>
        </div>
        <div class="project-info-item">
          <ul>
            <li>
              <span>{{project.targetAmount}}万</span>
              <br>
              <span>目标金额</span>
            </li>
            <li>
              <span>{{project.participantsNum}}</span>
              <br>
              <span>参与人数</span>
            </li>
            <li>
              <span>58</span>
              <br>
              <span>剩余天数</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="project-submit center pr">
        <a class="p-submit-btn"> 立即投资</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'project-item',
    props: ['project']
  }
</script>
<style>
  #projectLayout .project-box {
    height: 540px;
    width:260px;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    transition: all 0.2s ease-in-out 0s;
  }
  #projectLayout .project-box:hover {
    border: 2px solid #f52f3e;
    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
    transform: translateX(-3px);
  }
  #projectLayout .project-box .project-status {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background: #ff6f02;
    border-radius: 0 3px 0 10px;
    padding: 5px 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    z-index: 4;

  }
  #projectLayout .project-box .project-img .project-name {
    background: #000 none repeat scroll 0 0;
    bottom: 22px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px;
    opacity: 0.7;
    position: absolute;
    height: 70px;
    width: 170px;
    z-index: 2;

  }
  #projectLayout .project-box .project-img .project-date {
    background: #FF931E none repeat scroll 0 0;
    bottom: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px;
    position: absolute;
    height: 40px;
    width: 160px;
    left: 5px;
    z-index: 3;
  }
  #projectLayout .project-box .project-img img {
    width: 240px;
    height: 240px;
    border-radius: 5px;
  }

  #projectLayout .project-box .project-intro, #projectLayout .project-box .project-info {
    margin: 10px -10px 0;
    padding: 10px;
    border-bottom: 1px dashed #999;
    font-size: 14px;

  }
  #projectLayout .project-box .project-intro p {
    position:relative;
    line-height:1.4em;
    height:5.6em;
    overflow:hidden;
    color: #9A9A9A;
    font-weight:500;
  }
  #projectLayout .project-box .project-intro p::after{
    content:"...";
    font-weight:bold;
    position:absolute;
    width:50px;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url("../../assets/ellipsis_bg.png") repeat-y;
  }
  #projectLayout .project-box .project-info .project-info-item ul li{
    float: left;
    padding: 10px;
    font-weight: 700;
    color: #000;
  }

  #projectLayout .project-box .project-info .project-info-item ul li span:first-child {
    color: #f52f3e;
  }

  #projectLayout .project-box .project-submit {
    margin: 20px;
  }
  #projectLayout .project-box .project-submit .p-submit-btn {
    background: #fbb03b none repeat scroll 0 0;
    padding: 5px 50px;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
  }

  #projectLayout .project-box .project-submit a:hover{
    background: #f52f3e none repeat scroll 0 0;
    padding: 10px 50px;
    font-size: 14px;
    font-weight: 700;
  }
</style>
